<template>
	<view class="content">
		<view class="top">
			<view class="top_title">手续费</view>
			<view class="paymoney">
				<view class="sign iconfont">&#xe604;</view>
				<view class="money">{{serviceMoney}}</view>
			</view>
		</view>
		
		<view class="group">
			<view class="grouplist">
				<radio-group @change="radioChange">
					<label class="uni-list-cell" v-for="(item, index) in items" :key="index">
						<view class="uni_name">
							<image class="uni_icon" :src="item.image" mode=""></image>
							<view class="uni_detail">{{item.name}}</view>
						</view>
						<view>
							<radio :value="item.value" class="radio" color="#E42221" />
						</view>
					</label>
				</radio-group>
			</view>
			
		</view>
		<view class="bottom">
			<view class="submit" @click="gopay">去支付</view>
		</view>
		
		<ssPaymentPassword ref="paymentPassword" :mode="mode" @submit="submitHandle" @forgetPwd="forgetPwd" :value="paymentPwd" digits="6" />
		
	</view>
</template>

<script>
	import ssPaymentPassword from '../../../../../components/sanshui-payment-password'
	export default {
		components:{
			ssPaymentPassword
		},
		data() {
			return {
				items:[
					{
						value: '1',
						name: '支付宝',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/alipay.png'
					},
					{
						value: '2',
						name: '微信',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wxpay.png'
					},
					{
						value: '3',
						name: '余额',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/wallet.png'
					},
					{
						value: '4',
						name: '银联',
						image:'https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/bank.png'
					}
				],
				serviceMoney:'' ,// 手续费
				ids:'',
				payType:'',
				mode:1,
				paymentPwd:'',
				payPassword:'' // 支付密码
				
			}
		},
		onLoad(options) {
			console.log(options)
			this.serviceMoney = options.serviceMoney;
			this.ids = options.ids;
			let that = this;
			uni.$on('login',function(data){
				that.cacheHelper.isLogin()
				that.cacheHelper.updateUserInfo()
			})
		},
		methods: {
			
			radioChange: function (e) {
				console.log(e)
				this.payType = e.detail.value; 
				
			},
			// 去支付
			gopay: function () {
				let that = this;
				let payType = that.payType;
				if (payType == '') {
					that.tui.toast('请选择支付方式')
					return
				}
				if (payType == 1) { //支付宝
					that.api.userOneKeyTransition({
						ids:that.ids,
						payType:payType
					}).then(res => {
						console.log(res,"支付宝")
						let orderInfo = res.data.body;
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: orderInfo, //微信、支付宝订单数据
							success(res) {
								that.cacheHelper.updateUserInfo()
								that.tui.toast('支付成功')
								setTimeout(function() {
									uni.redirectTo({
										url:'../../userSaleBill/userSaleBill'
									});
									uni.$emit('goTake',{msg:'页面更新'});
									uni.$emit('update',{msg:'页面更新'})
									uni.$emit('billOrder',{msg:'页面更新'})
									uni.$emit('SalesOrder',{msg:'页面更新'})
									uni.$emit('login',{msg:'页面更新'})
								}, 500)
						
							},
							fail(err) {
								that.tui.toast(err)
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 500)
							}
						});
					})
				} else if (payType == 2) { // 微信
					that.api.userOneKeyTransition({
						ids:that.ids,
						payType:payType
					}).then(res => {
						console.log(res,"微信")
						let datas = JSON.parse(res.data);
						let orderInfo = datas.weixin;
						console.log(orderInfo,"orderInfo===")
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: orderInfo, //微信、支付宝订单数据
							success(res) {
								that.cacheHelper.updateUserInfo()
								that.tui.toast('支付成功')
								setTimeout(function() {
									uni.redirectTo({
										url:'../../userSaleBill/userSaleBill'
									});
									uni.$emit('goTake',{msg:'页面更新'});
									uni.$emit('update',{msg:'页面更新'})
									uni.$emit('billOrder',{msg:'页面更新'})
									uni.$emit('login',{msg:'页面更新'})
									
								}, 500)
							},
							fail(err) {
								that.tui.toast(err)
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 500)
							}
						});
						
					})
					
				} else if (payType == 3) { // 余额
					let userInfo = JSON.parse(uni.getStorageSync(that.constant.StorageName.APP_USER_INFO));
					console.log(userInfo)
					if (userInfo.isFirst == 0) { // 未设置支付密码
						that.tui.toast('没有设置支付密码，请先设置支付密码')
						uni.navigateTo({
							url: '../../paymentSetting/setPayPassword/setPayPassword',
						});
						return
					} else if (userInfo.isFirst == 1) { //已经设置支付密码
						that.$refs.paymentPassword.modalFun('show');
					}
					
					 
				} else if (payType == 4) { // 银联
					that.api.userOneKeyTransition({
						ids:that.ids,
						payType:payType
					}).then(res => {
						console.log(res)
					})
				}
				
				
			},
			// 忘记密码
			forgetPwd: function () {
				uni.navigateTo({
					url: '../../paymentSetting/setPayPassword/setPayPassword',
				});
			},
			submitHandle: function (e) {
				let that = this;
				console.log(e)
				console.log(that.ids,"ids---")
				that.payPassword = e.value;
				that.api.userOneKeyTransition({
					ids:that.ids,
					payType:that.payType,
					payPassword:that.payPassword
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function() {
						uni.redirectTo({
							url:'../../userSaleBill/userSaleBill'
						});
						uni.$emit('goTake',{msg:'页面更新'});
						uni.$emit('update',{msg:'页面更新'})
						uni.$emit('billOrder',{msg:'页面更新'})
						uni.$emit('billOrder',{msg:'页面更新'})
					}, 500)
					
				}).catch(err => {
					console.log(err)
					that.tui.toast(err.msg)
				})
				
			}
			
		},
		// 监听返回按钮
		onBackPress(e) {
			console.log(e)
			console.log("ppp")
			return
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 32rpx;
		color: #333333;
		padding: 30rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		.top_title {
			width: 100%;
			box-sizing: border-box;
			font-size: 36rpx;
			color: #140005;
			line-height: 60rpx;
			font-weight: 500;
		}
		.top_tip {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #666666;
			line-height: 50rpx;
		}
		.top_date {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40rpx 0;
			font-size: 36rpx;
			color: #666666;
			font-weight: 500;
			letter-spacing: 5rpx;
			.top_date_curr {
				color: #E42221;
				padding-left: 20rpx;
			}
		}
		.paymoney {
			width: 418rpx;
			line-height: 100rpx;
			border: 2rpx solid #E42221;
			margin: 20rpx auto 30rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 62rpx;
			color: #E42221;
			.sign {
				font-size: 32rpx;
				color: #FFDA71;
				padding-top: 15rpx;
			}
		}
		
	}
	
	.group {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0 180rpx 0;
		border-top: 2rpx dashed #666;
		.grouplist {
			width: 100%;
			box-sizing: border-box;
			.uni-list-cell {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 80rpx;
				padding: 10rpx 0;
				.radio {
					transform: scale(0.8);
				}
				.uni_name {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.uni_icon {
						width: 50rpx;
						height: 50rpx;
					}
					.uni_detail {
						padding-left: 18rpx;
					}
					
				}
				
				
			}
			
			
			
		}
	}
	.bottom {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 30rpx 50rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 66;
		.submit {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #E42221;
			border-radius: 8rpx;
			line-height: 94rpx;
		}
	}

</style>
